<!--
- File:    视频列表页.
-->
<template>
  <div class=" pb120">
    <div class="combo_box" v-infinite-scroll="loadMoreIntegral"
      infinite-scroll-disabled="false"
      infinite-scroll-distance="0"
      infinite-scroll-immediate-check="false">
      <router-link v-for="(item, index) in video.data" :to="{name:'video-detail', params: {id: item.video_id}}" :key="index">
        <div style="position: relative; width: 100%; height: auto">
        <i class="iconfont icon-shipin3" style="top: 50%; left: 50%; margin-top: -65px; margin-left: -30px; width: 60px; height: 60px"></i>
        <img :src="$config.imgsite + $config.goodsImgSrc + item.store_id + '/' + item.img_url + '_w640h320'">
        <p class=" bg_fff p20 mb20">{{item.title}}</p>
        </div>
      </router-link>
    </div>
    <loading-more :allLoaded="video.allLoaded" :show="video.data.length > 0"></loading-more>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  export default{
    data() {
      return {
        video: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
      }
    },
    components: {},
    created() {
      this.initVideoList()
      this.getVideoList(this.video.page, this.video.pageSize)
    },
    methods: {
      initVideoList() {
        this.video.requested = false
        this.video.loading = false
        this.video.allLoaded = false
        this.video.page = 1
        this.video.pageSize = 10
        this.video.data = []
      },
      getVideoList(page, pageSize) {
        this.video.loading = true
        this.$request.getVideo(page, pageSize).then(data => {
          if (data.length < this.video.pageSize) {
            this.video.allLoaded = true
          }
          this.video.data = [...this.video.data, ...data]
        }).finally(() => {
          this.video.requested = true
          this.video.loading = false
        })
      },
      loadMoreIntegral() {
        if (this.video.loading || this.video.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getIntegralList(++this.video.page, this.video.pageSize)
        }, 500)
      },
      // 去除iframe字符串的宽高
      delIframWH(html) {
        html = html.replace(/height=\d+/g, '')
        html = html.replace(/width=\d+/g, '')
        return html
      }
    }
  }
</script>

<style>

</style>